<template>
  <view class="address-add">
    <view class="a-form-item">
      <view class="i-label">联系人</view>
      <view class="i-value">
        <u--input v-model="form.recipient" placeholder="请填写收货人姓名" clearable></u--input>
      </view>
    </view>
    <view class="a-form-item">
      <view class="i-label">手机号</view>
      <view class="i-value">
        <u--input v-model="form.mobile" type="number" placeholder="请填写收货人手机号码" clearable></u--input>
      </view>
    </view>
    <view class="a-form-item" @tap="popup.fn.openHandle">
      <view class="i-label">收货地址</view>
      <view class="i-value">
        <text v-if="!form.provinceName" class="text_placeholder">请选择省、市、区</text>
        <text v-else class="text_value">{{ form.provinceName }}{{ form.cityName }}{{ form.districtName }}</text>
      </view>
    </view>
    <view class="a-form-item">
      <view class="i-label">详细地址</view>
      <view class="i-value">
        <u--input v-model="form.fullAddress" placeholder="请填写详细地址(街道、楼牌号等)" clearable></u--input>
      </view>
    </view>
    <view class="a-footer">
      <view class="f-btn" :class="{'f-btn--active': isActiveBtn}" @tap="addAddress">保存地址</view>
    </view>
    <u-popup :show="popup.attr.show" :round="10" :safeAreaInsetBottom="true" closeable @close="popup.attr.show = false">
      <view class="a-popup">
        <view class="p-title">请选择地区</view>
        <view class="p-tabs">
          <view class="t-tab" v-for="(item,i) in popup.attr.tabs" :key="item.id" @tap="popup.fn.selectBackHandle(item,i)">{{ item.name }}</view>
          <view class="t-tab t-tab--active">请选择</view>
        </view>
        <view class="p-list">
          <view class="l-item" v-for="item in popup.attr.list" :key="item.id" @tap="popup.fn.selectHandle(item)">{{ item.name }}</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { model } from '@/model';
const { Request } = model;
const { Member } = model.collection;

export default {
  components: {},
  data () {
    return {
      form: {
        recipient: '',
        provinceId: 0,
        provinceName: "",
        cityId: 0,
        cityName: "",
        districtId: 0,
        districtName: "",
        mobile: "",
        fullAddress: ""
      },
      popup: {
        attr: {
          show: false,
          tabs: [],
          list: []
        },
        fn: {
          openHandle: () => {
            this.popup.attr.tabs = [];
            this.popup.attr.show = true;
            this.popup.fn.getRegionPage(0);
          },
          selectHandle:(e) => {
            let { id,name,level } = e || {};
            if(level === 'province') {
              this.form.provinceId = id;
              this.form.provinceName = name;
              this.popup.attr.tabs.push(e);
            }
            if(level === 'city') {
              this.form.cityId = id;
              this.form.cityName = name;
              this.popup.attr.tabs.push(e);
            }
            if(level === 'district' || level === 'street' ) {
              this.form.districtId = id;
              this.form.districtName = name;
              this.popup.attr.tabs.push(e);
              this.popup.attr.show = false;
              return;
            }
            this.popup.fn.getRegionPage(id);
          },
          selectBackHandle:(e) => {
            let { pid,level } = e || {};
            this.popup.fn.getRegionPage(pid);
            if(level === 'city') {
              this.form.districtId = 0;
              this.form.districtName = '';
              this.popup.attr.tabs.pop();
            }
            if(level === 'province') {
              this.form.cityId = 0;
              this.form.cityName = '';
              this.form.districtId = 0;
              this.form.districtName = '';
              this.popup.attr.tabs = [];
            }
          },
          getRegionPage:(pId) => {
            new Request().do('ma', 'sys', 'regionPage', {
              params: { pageIndex: 1, pageSize: 50 }, data: {
                query: {
                  pId
                }
              }
            }).then(res => {
              const { status, data } = res;
              if (status) {
                this.popup.attr.list = data;
              } else {
                this.toast('获取区域地区信息失败');
              }
            });
          }
        }
      }
    }
  },
  computed: {
    isActiveBtn () {
      const { recipient, provinceName, cityName, districtName, mobile, fullAddress } = this.form;
      return !!(recipient && provinceName && cityName && districtName && mobile && fullAddress);
    }
  },
  created () { },
  mounted () { },
  methods: {
    addAddress () {
      if (!this.isActiveBtn) {
        this.toast('请填写完整信息 !');
        return;
      }
      Member.sendApi("addressAdd", {
        params: {},
        data: this.form,
      }).then((res) => {
        if (res.status) {
          this.toast('新地址添加成功！');
          this.back();
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.address-add {
  height: 100vh;
  background: #efefef;
  .a-form-item {
    .layout_flex();
    padding: 30rpx;
    background: #fff;
    .i-label {
      width: 150rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    .i-value {
      flex: 1;
      .text_placeholder {
        margin-left: 20rpx;
        color: #c0c4cc;
        font-size: 30rpx;
        text-align: left;
      }
      .text_value {
        margin-left: 20rpx;
        font-size: 30rpx;
        text-align: left;
      }
    }
  }
  .a-footer {
    position: fixed;
    bottom: 30rpx;
    .layout_flex(@j:center);

    .f-btn {
      width: 690rpx;
      height: 90rpx;
      margin: 0 30rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
      text-align: center;
      line-height: 90rpx;
      background: linear-gradient(-90deg, #ff3531, #ff7103);
      border-radius: 45rpx;
      opacity: 0.6;

      &--active {
        opacity: 1;
      }
    }
  }
  .a-popup {
    .layout_flex(@d:column);
    width: 100%;
    height: 85vh;
    padding: 0 20rpx;
    .p-title {
      width: 100%;
      padding: 20rpx 0;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      text-align: center;
    }
    .p-tabs {
      .layout_flex();
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      .t-tab {
        margin-right: 50rpx;
        &--active {
          position: relative;
          &::after {
            position: absolute;
            left: 2rpx;
            bottom: 0;
            content: "";
            width: 88rpx;
            height: 4rpx;
            background: #ff382f;
            border-radius: 2rpx;
          }
        }
      }
    }
    .p-list {
      flex: 1;
      width: 100%;
      overflow-y: auto;
      .l-item {
        height: 68rpx;
        line-height: 68rpx;
        font-size: 30rpx;
        font-weight: 500;
        color: #666;
      }
    }
  }
}
</style>
